import React, { Component } from 'react';
import { Button, Table, Radio, Dialog, Select, Form, Input } from '@alifd/next';
import IceContainer from '@icedesign/container';
import { list, quguang } from '../../utils/setting';
import './index.scss';
import service from '../../utils/service';
import api from '../../utils/api.js';

const RadioGroup = Radio.Group;

export default class GlassTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: props.GlassTableVisible,
      isLoading: true,
      lensType: '- / -',
      NumVisible: false,
      dataSource: props.dataSource,
      stock_id: props.stock_id,
      batchNumberArr: [],
      BuyData: {},
    };
  }

  componentWillReceiveProps(nextProps) {
    // console.log(2);
    if (nextProps.GlassTableVisible !== this.props.GlassTableVisible || nextProps.dataSource !== this.props.dataSource) {
      this.setState({
        dataSource: nextProps.dataSource,
        visible: nextProps.GlassTableVisible,
        // NumVisible: nextProps.NumVisible,
        lensType: nextProps.lensType,
        isLoading: false,
        stock_id: nextProps.stock_id,
      });
    }
  }
  // 获取批号
  // getBatchNumber= () => {
  //   const data = this.state;
  //   // console.log(data);
  //   service({
  //     method: 'get',
  //     url: api.getBatchNumber,
  //     params: {
  //       stock_id: data.stock_id,
  //       diopter: data.diopter,
  //       astigmatism: data.astigmatism,
  //       lens_type: data.lensType,
  //     },
  //   })
  //     .then((res) => {
  //       // console.log(res);
  //       if (res.data.code === 200) {
  //         const oList = res.data.lens_list;
  //         const batchNumberArr = [];
  //         oList.forEach((item) => {
  //           batchNumberArr.push({ label: item.batch_number, value: item.id });
  //         });
  //         this.setState(
  //           {
  //             batchNumberArr,
  //             NumVisible: true,
  //             isLoading: false,
  //           }
  //         )
  //       }
  //     });
  // }

    renderCell = (valueKey, value, index, record) => {
      return (
        <div>
          {value > 0 ? (<span className="GlassTableCellYes" onDoubleClick={this.handleDoubleClick.bind(this, valueKey, value, index)} >{value}</span>)

         :
         (<span className="GlassTableCellNo" />)
         }
        </div>
      );
    }
    handleDoubleClick= (valueKey, value, index) => {
      // console.log(valueKey, value, index);
      if (value > 0) {
        this.props.handleDoubleClick(valueKey, quguang[index]);
        // this.setState(
        //   {
        //     astigmatism: valueKey,
        //     diopter: quguang[index],
        //     isLoading: true,
        //     // NumVisible: true,
        //   }, () => {
        //     // this.getBatchNumber();
        //   }
        // );
      } else {
        return false;
      }
    }
    onRadioChange=(value) => {
      this.setState(
        {
          isLoading: true,
          // lensType: value,
        }, () => {
          // console.log(1);
          this.props.handleRadioChange(value);
        }
      );
    }
    onClose=() => {
      this.props.handleClose();
    }
   
    render() {
      const { visible, isLoading, lensType, dataSource } = this.state;
      return (
        <div>
          <Dialog
            visible={visible}
            footerActions={[]}
            style={{ marginTop: '25px', WebkitUserSelect: 'none' }}
            onClose={this.onClose}
            footerAlign="center"
            footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn SubBtn">确定</Button></div>}
          >
            <div>
              <h3 className="titleWrap"><span className="dialogTitle">商品库存数量</span></h3>
              <IceContainer className="glassBuy dialogContent">
                <RadioGroup dataSource={list} value={lensType} onChange={this.onRadioChange} style={{ marginBottom: '20px', fontSize: '16px' }} />
                <Table loading={isLoading} dataSource={dataSource} hasBorder className="glassTable" maxBodyHeight={600} fixedHeader >
                  <Table.Column title="屈光/散光" dataIndex="屈光度" className="leftHead" />
                  <Table.Column title="0.00" dataIndex="number000" cell={this.renderCell.bind(this, '0.00')} />
                  <Table.Column title="0.25" dataIndex="number025" cell={this.renderCell.bind(this, '0.25')} />
                  <Table.Column title="0.50" dataIndex="number050" cell={this.renderCell.bind(this, '0.50')} />
                  <Table.Column title="0.75" dataIndex="number075" cell={this.renderCell.bind(this, '0.75')} />
                  <Table.Column title="1.00" dataIndex="number100" cell={this.renderCell.bind(this, '1.00')} />
                  <Table.Column title="1.25" dataIndex="number125" cell={this.renderCell.bind(this, '1.25')} />
                  <Table.Column title="1.50" dataIndex="number150" cell={this.renderCell.bind(this, '1.50')} />
                  <Table.Column title="1.75" dataIndex="number175" cell={this.renderCell.bind(this, '1.75')} />
                  <Table.Column title="2.00" dataIndex="number200" cell={this.renderCell.bind(this, '2.00')} />
                  <Table.Column title="2.25" dataIndex="number225" cell={this.renderCell.bind(this, '2.25')} />
                  <Table.Column title="2.50" dataIndex="number250" cell={this.renderCell.bind(this, '2.50')} />
                  <Table.Column title="2.75" dataIndex="number275" cell={this.renderCell.bind(this, '2.75')} />
                  <Table.Column title="3.00" dataIndex="number300" cell={this.renderCell.bind(this, '3.00')} />
                  <Table.Column title="3.25" dataIndex="number325" cell={this.renderCell.bind(this, '3.25')} />
                  <Table.Column title="3.50" dataIndex="number350" cell={this.renderCell.bind(this, '3.50')} />
                  <Table.Column title="3.75" dataIndex="number375" cell={this.renderCell.bind(this, '3.75')} />
                  <Table.Column title="4.00" dataIndex="number400" cell={this.renderCell.bind(this, '4.00')} />
                  <Table.Column title="4.25" dataIndex="number425" cell={this.renderCell.bind(this, '4.25')} />
                  <Table.Column title="4.50" dataIndex="number450" cell={this.renderCell.bind(this, '4.50')} />
                  <Table.Column title="4.75" dataIndex="number475" cell={this.renderCell.bind(this, '4.75')} />
                  <Table.Column title="5.00" dataIndex="number500" cell={this.renderCell.bind(this, '5.00')} />
                </Table>
              </IceContainer>
            </div>
            {/* 商品数量 */}
          </Dialog>
          {/* <Dialog
            visible={NumVisible}
            footerActions={[]}
            style={{ marginTop: '25px' }}
            onClose={() => { this.setState({ NumVisible: false }); }}
            footerAlign="center"
            footer={<div><Button type="primary" onClick={this.handleNumBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={() => { this.setState({ NumVisible: false }); }} style={{ margin: '0' }} className="dialogButton OutBtn">取消</Button></div>}
          >
            <div>
              <h3 className="titleWrap"><span className="dialogTitle">添加商品</span></h3>
              <IceContainer className="dialogContent">
                <Form
                  style={styles.formFlex}
                  inline
                  size="large"
                  onChange={this.handleStockFormChange}
                >
                  <Form.Item label="生产批号" >
                    <Select
                      placeholder="请选择生产批号"
                      name="lens_id"
                      style={{ width: '300px' }}
                      dataSource={batchNumberArr}
                    />
                  </Form.Item>
                  <Form.Item label="购买数量" >
                    <Input
                      placeholder="请输入购买数量"
                      id="num"
                      name="num"
                      value="1"
                      style={{ width: '300px', paddingLeft: '4px' }}
                      readOnly
                    />
                  </Form.Item>

                </Form>
              </IceContainer>
            </div>
          </Dialog> */}
        </div>
      );
    }
}
const styles = {
  formFlex: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
};

